import { setOnImageSelected } from './imageInput.js';
import { showImage, getPixelInfo, getPixelPreviewImage, setOnShowResult, renderPoint } from './imagePreview.js';
import { setOnMouseMove } from './mouse.js';
import { isValidPosition, hidePanel, showPanel as showPixelPreviewPanel, setPixelInfo } from './pixelPreview.js';
import { hidePanel as hideResultPanel, showPanel as showResultPanel } from './resultPanel.js';
import { throttle } from './utils.js';

const main = () => {
  setOnImageSelected((image) => {
    showImage(image);
  });

  // 刷新圆形预览图
  const refreshPixelPanel = throttle((x, y) => {
    setPixelInfo(getPixelPreviewImage(x, y), getPixelInfo(x, y));
  }, 50);

  setOnMouseMove((x, y, clientX, clientY) => {
    if (isValidPosition(x, y)) {
      // renderPoint(x, y);
      refreshPixelPanel(x, y);
      showPixelPreviewPanel(clientX, clientY);
    } else {
      // 鼠标移出图片区域，隐藏预览图
      hidePanel();
    }
  });

  setOnShowResult((pixelInfo) => {
    showResultPanel(pixelInfo);
  });
};

window.addEventListener('load', main);
